<template>
  <div style="font-size: 12px;line-height: 60px;display: flex">
    <div style="flex: 1;font-size: 18px">
      <span id="menuIcon" :class="menuBtn" style="cursor: pointer" @click="collapse"></span>

      <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;margin-left: 10px">
        <el-breadcrumb-item :to="'/System_TeaBackend/Tea_ProjectIntroduction'">{{
            $t('main.BackgroundManagementSystem')
          }}
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="!(currentPathName==='个人中心' || currentPathName==='欢迎' || currentPathName==='修改密码')">{{ path }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-dropdown style="width: 135px;cursor: pointer;text-align: right">
      <span>{{ Teacher.username }}</span>
      <i class="el-icon-caret-bottom" style="margin-left: 5px"></i>
      <el-dropdown-menu slot="dropdown" style="width: 120px;text-align: center">
        <el-dropdown-item>
          <router-link to="/System_TeaBackend/Tea_PersonalCenter" style="text-decoration: none;color: black">
          {{ $t('main.PersonalCenter') }}
          </router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/System_TeaBackend/TeaResetPassword" style="text-decoration: none;color: black">
            修改密码
          </router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <span @click="quit">{{ $t('main.Exit') }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      path: '',
      Teacher: localStorage.getItem("Teacher") ? JSON.parse(localStorage.getItem("Teacher")) : {}
    }
  },
  props: {
    menuBtn: String,
    collapse: Function,
  },
  methods:{
    quit(){
      localStorage.removeItem("Teacher")
      this.$message.success("退出成功！")
      this.$router.push("/TeaLogin")
    }
  },
  computed: {
    currentPathName() {
      // 获取当前语言
      let currentLanguage = localStorage.getItem('lang')
      // 获取当前选取的路径名称
      let val = this.$store.state.currentPathName

      if (currentLanguage === 'English') {
        if (val === '项目介绍') {
          val = this.$i18n.messages.English.main.ProjectIntroduction
          this.path = 'Home'
        } else if (val === '学生管理') {
          val = this.$i18n.messages.English.main.StudentManagement
          this.path = 'Systems management'
        } else if (val === '外观') {
          val = this.$i18n.messages.English.main.Appearance
          this.path = 'Setting'
        } else if (val === '语言') {
          val = this.$i18n.messages.English.main.Language
          this.path = 'Setting'
        }
      }

      if (currentLanguage === 'Chinese') {
        if (val === '项目介绍') {
          val = this.$i18n.messages.Chinese.main.ProjectIntroduction
          this.path = '首页'
        } else if (val === '学生管理') {
          val = this.$i18n.messages.Chinese.main.StudentManagement
          this.path = '系统管理'
        } else if (val === '外观') {
          val = this.$i18n.messages.Chinese.main.Appearance
          this.path = '设置'
        } else if (val === '语言') {
          val = this.$i18n.messages.Chinese.main.Language
          this.path = '设置'
        }
      }

      if (currentLanguage === 'Japanese') {
        if (val === '项目介绍') {
          val = this.$i18n.messages.Japanese.main.ProjectIntroduction
          this.path = 'トップページ'
        } else if (val === '学生管理') {
          val = this.$i18n.messages.Japanese.main.StudentManagement
          this.path = 'システム管理'
        } else if (val === '外观') {
          val = this.$i18n.messages.Japanese.main.Appearance
          this.path = '設定＃セッテイ＃'
        } else if (val === '语言') {
          val = this.$i18n.messages.Japanese.main.Language
          this.path = '設定＃セッテイ＃'
        }
      }

      if (currentLanguage === 'Korean') {
        if (val === '项目介绍') {
          val = this.$i18n.messages.Korean.main.ProjectIntroduction
          this.path = '첫 페이지'
        } else if (val === '学生管理') {
          val = this.$i18n.messages.Korean.main.StudentManagement
          this.path = '시스템 관리'
        } else if (val === '外观') {
          val = this.$i18n.messages.Korean.main.Appearance
          this.path = '설치'
        } else if (val === '语言') {
          val = this.$i18n.messages.Korean.main.Language
          this.path = '설치'
        }
      }

      if (currentLanguage === 'Russian') {
        if (val === '项目介绍') {
          val = this.$i18n.messages.Russian.main.ProjectIntroduction
          this.path = 'Главная страница'
        } else if (val === '学生管理') {
          val = this.$i18n.messages.Russian.main.StudentManagement
          this.path = 'Главная страница'
        } else if (val === '外观') {
          val = this.$i18n.messages.Russian.main.Appearance
          this.path = 'Настройка'
        } else if (val === '语言') {
          val = this.$i18n.messages.Russian.main.Language
          this.path = 'Настройка'
        }
      }

      if (currentLanguage === 'German') {
        if (val === '项目介绍') {
          val = this.$i18n.messages.German.main.ProjectIntroduction
          this.path = 'Startseite'
        } else if (val === '学生管理') {
          val = this.$i18n.messages.German.main.StudentManagement
          this.path = 'Systemverwaltung'
        } else if (val === '外观') {
          val = this.$i18n.messages.German.main.Appearance
          this.path = 'einrichten'
        } else if (val === '语言') {
          val = this.$i18n.messages.German.main.Language
          this.path = 'einrichten'
        }
      }

      if (currentLanguage === 'French') {
        if (val === '项目介绍') {
          val = this.$i18n.messages.French.main.ProjectIntroduction
          this.path = 'Accueil'
        } else if (val === '学生管理') {
          val = this.$i18n.messages.French.main.StudentManagement
          this.path = 'Gestion du système'
        } else if (val === '外观') {
          val = this.$i18n.messages.French.main.Appearance
          this.path = 'Paramètres'
        } else if (val === '语言') {
          val = this.$i18n.messages.French.main.Language
          this.path = 'Paramètres'
        }
      }

      return val
    }
  },
}
</script>

<style scoped>
/*
   菜单按钮图标样式
*/
#menuIcon:hover {
  color: #66ccff;
}
</style>